<!DOCTYPE html>
<html>

<head>
  <title><%= title %></title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" maximum-scale=1.0, user-scalable=0
    user-scalable="no">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="color-scheme" content="light dark">
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <style>
    button {
      display: block;
      font-size: 16px;
      padding: 5px 15px;
      margin: 10px 0;
      color: #fff;
      background: #48c23d;
      border: none;
      /* border:  1px solid #ccc ; */
      border-radius: 10px;
    }
  </style>
</head>

<body>

  <div id="app">
    <h2>{{test}}</h2>
    <button @click="openImg">从手机或相册选择图片</button>
    <button @click="getLocation">发送用户位置</button>
    <button @click="getNetwork">查看网络状态</button>
    <button @click="openscanQRCode">调起微信扫一扫</button>
    <button @click="openAddress">共享收货地址</button>


  </div>
  <!-- <script src="../public/javascripts/vue.min.js"></script> -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
  <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
  <script>
    // import axios from 'axios'
    var vconsole = new VConsole();
    let vm = new Vue({
      el: '#app',
      data: {
        test: 'hello WeChat',
        vConsole: null,
        weixinCode: 0
      },
      methods: {
        getAccessToken() {
          // axios.get('http://127.0.0.1:3000/wechat/access').then(res=>{
          //   console.log(res);
          // })
        },

        //调起发送图片接口
        openImg() {
          wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
              var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
              console.log(localIds)
            }
          });
        },

        //获取用户位置
        getLocation() {
          wx.getLocation({
            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
            success: (res)=> {
              var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
              var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
              var speed = res.speed; // 速度，以米/每秒计
              var accuracy = res.accuracy; // 位置精度

              //调起微信地图
              this.openLocation(res)
            }
          });
        },

        //调起微信地图
        openLocation(res) {
          fetch('http://store.liufengmao.cn:3001/geocoder', {
            method: 'post',
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: JSON.stringify(data = {
              latitude: res.latitude,
              longitude: res.longitude
            })
          }).then(response => response.json()).then(response => {
            console.log('服务端相应', response);
            let { result } = response.data
            wx.openLocation({
              latitude: result.location.lat, // 纬度，浮点数，范围为90 ~ -90
              longitude: result.location.lng, // 经度，浮点数，范围为180 ~ -180。
              name: result.formatted_addresses.recommend, // 位置名
              address: result.address, // 地址详情说明
              scale: 15, // 地图缩放级别,整形值,范围从1~28。默认为最大
              infoUrl: 'www.baidu.com' // 在查看位置界面底部显示的超链接,可点击跳转
            });
          })
        },

        //查看网络状态
        getNetwork() {
          wx.getNetworkType({
            success: function (res) {
              var networkType = res.networkType; // 返回网络类型2g，3g，4g，wifi
              // alert(networkType)
              console.log(networkType);
            }
          });
        },

        /**
         * 调起微信扫一扫
        */
        openscanQRCode() {
          wx.scanQRCode({
            needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
            success: function (res) {
              var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
              console.log(result);

            }
          });
        },

        /**
         * 共享收货地址接口
        */
        openAddress() {
          wx.openAddress({
            success: function (res) {
              var userName = res.userName; // 收货人姓名
              var postalCode = res.postalCode; // 邮编
              var provinceName = res.provinceName; // 国标收货地址第一级地址（省）
              var cityName = res.cityName; // 国标收货地址第二级地址（市）
              var countryName = res.countryName; // 国标收货地址第三级地址（国家）
              var detailInfo = res.detailInfo; // 详细收货地址信息
              var nationalCode = res.nationalCode; // 收货地址国家码
              var telNumber = res.telNumber; // 收货人手机号码
              alert(res)

            }
          });
        },

        /**
         *  获取用户code
        */
        getUserCode() {
          const AppId = 'wxb7a17349f5e9f989';  // 测试公众号平台的APPID，第1步那个链接里
          let flag = true
          let url = location.search; //获取url中"?"符后的字符串
          console.info('url:', url)
          let theRequest = new Object();
          if (url.indexOf("?") != -1) {
            let str = url.substr(1);
            strs = str.split("&");
            for (let i = 0; i < strs.length; i++) {
              theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
            }
          }
          console.info('code:', theRequest)
          let code = ''
          const local = 'http://store.liufengmao.cn:3001/wechat'
          // 如果code是''，说明还没有授权，访问下面连接，用户同意授权，获取code
          let urlStr = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
          // `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${AppId}&redirect_uri=${local}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
          if (Object.keys(theRequest).length < 1) {

            window.location.href = urlStr;
          } else {
            console.info('拿到code', theRequest)
          }
          console.info('urlStr:', urlStr)
        }
      },
      async created() {
        //获取用户code
        await this.getUserCode()
      },
      async mounted() {
        //拿到jsapk签名
        await fetch(`http://store.liufengmao.cn:3001/access?url=${location.href}`, {
          method: 'GET'
        }).then(res => res.json()).then(res => {
          let { appid, timestamp, nonceStr, signature, } = res.data
          wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: 'wxb7a17349f5e9f989', // 必填，公众号的唯一标识
            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature,// 必填，签名
            jsApiList: ['getLocation', 'openLocation', 'chooseImage', 'getNetworkType', 'scanQRCode'] // 必填，需要使用的JS接口列表
          });

          wx.ready(function (data = 'init') {
            console.log(data);
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
          });

          wx.error(function (err = 'err') {
            alert('错误')
            console.log(err);
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          });
        })
      }
    })
  </script>
</body>

</html>